<template>
    <el-container class="container">
      <el-header class="header">
        <el-row justify="end">
          <el-col :span="3" @click="logout" class="hand-shape">LOGOUT</el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside class="aside" width="200px">
          <template v-for="(item, idx) in menus">
            <div class="left-menu hand-shape" @click="goto(item)">
              {{ item.meta.title }}
            </div>
          </template>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
</template>
<style scoped>
.header {
  padding: 15px;
  background: #666;
  color: #fff;
}
.aside {
  padding: 22px 0;
  height: 100%;
  background: #ccc;
}
.left-menu {
  padding: 11px 0;
  text-align: center;
}
.left-menu:hover {
  background: #fff;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import router from '@/router'
import { menus } from '@/router'
const logout = () => {
  localStorage.clear()
  router.push({ name: 'login' })
}
const leftMenu = ref(menus)

const goto = (item) => {
  router.push({ name: item.name })
}
</script>
